<template>
  <span>
    <!-- {{ data.fileList }} -->
    <!-- 本地调试,不上传模式    :auto-upload="false" -->
    <el-upload
      v-model="data.fileList"
      multiple
      :headers="config.headers"
      :action="config.url"
      :limit="config.limit"
      :auto-upload="true"
      :on-change="onChange"
      :on-error="onError"
      :on-exceed="handleExceed"
      :before-upload="beforeAvatarUpload"
    >
      <el-button type="primary">点击上传</el-button>
      <template #tip>
        <div class="el-upload__tip">
          {{ config.info }}
        </div>
      </template>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img
        style="width: 100%; max-width: 800px"
        :src="dialogImageUrl"
        alt="Preview Image"
      />
    </el-dialog>
  </span>
</template>

<script>
export default {
  props: {
    value: {
      type: [Array, String],
      default: function() {
        return [];
      }
    },
    config: {
      type: Object,
      default: function() {
        return {
          limit: 3,
          type: ["image/png", "image/jpeg", "application/pdf"],
          size: 1024 * 1024 * 2, // 2MB
          info: "jpg/png 文件 且大小不超过 500kb"
        };
      }
    }
  },

  data() {
    return {
      data: { fileList: [] },
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false
    };
  },

  watch: {
    value: {
      handler(newValue, oldValue) {
        if (newValue) {
          this.data.fileList = this.$klcs.deepClone(true, [], newValue);
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    onChange(uploadFile, uploadFiles) {
      var number = this.config.limit;
      this.data.fileList = this.data.fileList.slice(-number);
    },

    onHttpRequest(param) {
      console.log(param);
      return this.$klcs
        .ajaxTest("https://www.fastmock.site/mock/")
        .then(res => {
          console.log(res);
          if (res) {
            param.onSuccess();
            this.$message.success("上传成功");
            this.$emit("update:value", this.data.fileList);
            this.$emit("change", this.data.value);
          } else {
            param.onError();
          }
        })
        .catch(err => {
          console.error("上传失败", err);
          param.onError();
        });
    },

    beforeAvatarUpload(rawFile) {
      console.info("校验格式", rawFile.type);
      if (!this.config.type.includes(rawFile.type)) {
        this.$message.error("文件格式不正确!");
        return false;
      }
      // 校验大小
      if (rawFile.size > this.config.size) {
        this.$message.error("文件大小超过限制!");
        return false;
      }

      return true;
    },

    onError(err, file, fileList) {
      console.log(err, file, fileList);
      this.$message.error("上传失败");
    },

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    handleRemove(file) {
      let index = this.data.fileList.findIndex(
        fileItem => fileItem === file.response
      );
      this.data.fileList.splice(index, 1);
      console.log(file);
    },

    handleDownload(file) {
      console.log(file);
    },

    handleExceed(files, uploadFiles) {
      console.log(11111, 222222222222222);
      if (this.data.fileList.length >= this.config.limit) {
        this.$message.error("超出上传限制!");
        return false;
      } else {
        this.$message.error("超出上传限制!");
      }
    }
  },

  created() {
    // 对应Vue3的onBeforeMount
    if (this.value) {
      this.data.fileList = this.$klcs.deepClone(true, [], this.value);
    }
  },

  mounted() {
    // 对应Vue3的onMounted
  }
};
</script>